<template>
  <div class="config-container">
    <el-tabs v-model="tabActiveName">
      <!-- #region 配置项 -->
      <el-tab-pane label="Config" name="Config">
        <el-collapse :model-value="collapseActiveNames">
          <!-- 通用 -->
          <el-collapse-item name="common">
            <template #title>
              <span class="config-title">通用</span>
            </template>
            <BaseRenderForm></BaseRenderForm>
          </el-collapse-item>

          <!-- 柱状图配置项 -->
          <el-collapse-item :name="ChartType.BAR" v-if="curEditChartType === ChartType.BAR">
            <template #title>
              <span class="config-title">柱状图</span>
            </template>
            <BarRenderForm @addSeries="addSeries" @removeSeries="removeSeries"></BarRenderForm>
          </el-collapse-item>

          <!-- 折线图配置项 -->
          <el-collapse-item :name="ChartType.LINE" v-else-if="curEditChartType === ChartType.LINE">
            <template #title>
              <span class="config-title">折线图</span>
            </template>
            <LineRenderForm @addSeries="addSeries" @removeSeries="removeSeries">
            </LineRenderForm>
          </el-collapse-item>

          <!-- 饼图配置项 -->
          <el-collapse-item :name="ChartType.PIE" v-else-if="curEditChartType === ChartType.PIE">
            <template #title>
              <span class="config-title">饼图</span>
            </template>
            <PieRenderForm @addSeries="addSeries" @removeSeries="removeSeries">
            </PieRenderForm>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <!-- #endregion -->

      <!-- #region 源代码 -->
      <el-tab-pane label="Code" name="Code">
        <div class="code-dv">
          <el-input type="textarea" readonly resize="none" v-model="originCode" autosize></el-input>
        </div>
      </el-tab-pane>
      <!-- #endregion -->
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { chartStore } from '../../store/index'
import { storeToRefs } from 'pinia'

import { EChartsConfigForm } from '../../types/EChartsConfigForm'
import { ChartType } from '../../types/EChartsTypes'
import {
  Series,
} from '../../types/EChartsCommonConfig'

import BarRenderForm from '../RenderForm/BarRenderForm.vue'
import BaseRenderForm from '../RenderForm/BaseRenderForm.vue'
import LineRenderForm from '../RenderForm/LineRenderForm.vue'
import PieRenderForm from '../RenderForm/PieRenderForm.vue'

const store: any = chartStore()
// 配置项 = 通用 + 各图表单独配置
const collapseActiveNames = ['common'].concat(Object.values(ChartType))
const primaryColor = '#409EFF'
// 源代码
let { originCode, curEditChartType } = storeToRefs(store)

let tabActiveName = ref('Config')

let form: EChartsConfigForm = store.form

// 添加数据项（如多个柱状）
function addSeries(seriesItem: Series) {
  seriesItem.id = new Date().getTime()
  form.series.push(seriesItem)
}

// 删除数据项
function removeSeries(id: number) {
  const targetIndex = form.series.findIndex(item => item.id === id)
  form.series.splice(targetIndex, 1)
}
</script>

<style lang="less" scoped>
.config-container {
  width: 100%;
  height: 100%;
  // background-color: antiquewhite;
  border-left: 1px solid #eee;
  box-sizing: border-box;
  padding: 0 20px;

  overflow: scroll;

  &::-webkit-scrollbar {
    visibility: hidden;
    width: 0;
    height: 0;
  }
}

.config-title {
  font-size: 18px;
  font-weight: bold;
  color: @primary-color;
}

.code-dv {
  overflow: scroll-y;
  box-sizing: border-box;
  padding: 0 0 20px 0;

  &::-webkit-scrollbar {
    visibility: hidden;
    width: 0;
    height: 0;
  }

  &::-webkit-scrollbar {
    width: 7px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: auto;
  }

  /*滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent);
  }

  /*滚动条里面轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: #ededed;
    border-radius: 20px;
  }
}
</style>
